<template>
    <div class="discover discoverlist">
        <list-box :listbox="listMsg"></list-box>
        <div v-if="listMsg && listMsg.length >= 3" class="last-end">~油门到底了~</div>
    </div>
</template>

<script>

import listBox from "../common/listbox";
import common from "../../../assets/js/common.js";  
import url from 'url';
import qs from 'querystring';
import Vue from 'vue';

export default {
    data () {
        return {
            listMsg: []
        }
    },
    mounted: function() {
        var me = this;
        
        // 列表项目
        me.listItem();
    },
    components:{ listBox },
    methods: {
        
        /**
         *  列表项目
         */
        listItem: function() {
            
            var me = this;
            var arg = url.parse(window.location.href).query; // url参数
            var artColumn = qs.parse(arg)['artColumn']; // 当前栏目

            var objCloumn = {
                'artlist_001': '洗车', 
                'artlist_002': '美容',
                'artlist_003': '保养',
                'artlist_004': '轮胎'
            }
            
            // 设置title 
            document.title = objCloumn[artColumn];
            
            // 请求 列表数据 [artlist_001,洗车][artlist_002,美容][artlist_003,保养][artlist_004,轮胎]
            me.$http.get(common.isdev() + '/cxb/app/discover/discoveydetail/index.shtml', {}).then(function(d) {
                var data = me.parseData(d);
                if (!me.isObject(data)) {
                    data = JSON.parse(data.body);
                } else {
                    data = data.body;
                }

                
                if (data.errorCode == 0) {
                    var len = data.result.creditTradeVOs.length;
                    var tmpData = data.result.creditTradeVOs;
                    
                    // 拼接url
                    while(len--) {
                        tmpData[len]['iconShow'] = 1; 
                        // type  [1,视频] [2, 文章] 
                        if (tmpData[len].type == 1) {
                            tmpData[len]['detailsUrl'] = common.path()+'/discover/videodetails/videodetails.'+common.isHtml()+'?artColumn=' + tmpData[len]['artColumn'] + '&artId=' + tmpData[len]['id'];
                        } else if(tmpData[len].type == 2) {
                            tmpData[len]['detailsUrl'] = common.path()+'/discover/imgdetsils/imgdetsils.'+common.isHtml()+'?artColumn=' + tmpData[len]['artColumn'] + '&artId=' + tmpData[len]['id'];
                        }
                    }
                    
                    // 获取 sessionStorage 中的 版本，平台，cityCode信息
                    var appVersion = sessionStorage.getItem('appVersion') || '3.6'; // 默认版本
                    var plateformType = sessionStorage.getItem('plateformType') || 'both'; // 默认平台 both android 和 ios 都可用 
                    var cityCode = sessionStorage.getItem('cityCode') || '310100'; // 城市code
                    
                    
                    var listArr = [];
                    // 过滤版本&过滤系统
                    for (var i=0; i<tmpData.length; i++) {
                        if (tmpData[i]['appVersion'] != appVersion && (plateformType || tmpData[i]['plateformType'] == plateformType)) {
                            listArr.push(tmpData[i]);
                        }
                    }
                    
                    var tmpListArr = [];
                    // 过滤当前栏目
                    for(var i=0; i<listArr.length; i++) {
                        if (listArr[i]['artColumn'] == artColumn) {
                            tmpListArr.push(listArr[i]);
                        }
                    }
                    
                    // 业务分类 分组   // map  {a: [{}, {}, {}], b: [{}] }
                    var objMap = {};
                    for(var i=0; i<tmpListArr.length; i++) { // bizCategory [业务分类]
                        var artColumns = tmpListArr[i]['artColumn'];
                        if (objMap[artColumns]) { // 判断`bizCategory` 的value 值 
                            objMap[artColumns].push(tmpListArr[i]); 
                        } else {
                            var _listArr = [];
                            _listArr.push(tmpListArr[i]); // [{}, {}, {}]
                            objMap[artColumns] = _listArr;
                        }
                    }
                    
                    // 分组  // 按 objMap key的value遍历   // [{}, {}, {}]
                    // 是否显示  和  是否当前城市  
                    var availableDetails = []; 
                    for(var j in objMap) {
                        if (objMap[j].length == 1 && objMap[j][0].isShow == 1) { // isShow （1【显示】 0【隐藏】）  
                            if (objMap[j][0]['generic'] == 1) { // generic （1【全国显示】 0【全国隐藏】）
                            // 判断是否全国 
                                availableDetails.push(objMap[j][0]);
                            } else if (objMap[j][0]['cityCode'] == cityCode) {
                            // cityCode 
                                availableDetails.push(objMap[j][0]);                                
                            }
                        } else {
                            var tmp = objMap[j];  //  {a: [{}, {}, {}], b: [{}] }
                            for(var m=0; m<tmp.length; m++) {
                                // 解析城市code
                                var codeArr = tmp[m]['cityCode'].split(',');
                                for(var t=0; t<codeArr.length; t++) {
                                    if (tmp[m]['generic'] == 1) {
                                    // 全国
                                        availableDetails.push(tmp[m]);
                                        break;
                                    } else if (tmp[m].isShow == true && codeArr[t] == cityCode) {
                                    // 各个城市
                                        availableDetails.push(tmp[m]);
                                    }
                                }
                            }
                        }
                    }
                    me.read(availableDetails);
               }
               
            });
            
            
        },
        
        /**
         * 阅读量 接口
         * @param {Object} data
         */
        read: function(data) {
            var me = this;
            var milieuObj = {
                'prod':'chexiang',
                'pre':'chexiangpre',
                'sit':'chexiangsit'
            }
            var host = '//cxjapp.'+milieuObj[process.env.NODE_ENV]+'.com';

            // http://cxjapp.chexiangsit.com/service/discovery/getPageView/0.htm?jsonp=callbackFunction&articleId=1111
            if (data) {
                var len = data.length;
                var num = len;
                for (var i=0; i<len; i++) {
                    (function(i) {
                        var promise = Vue.http({
                            url: host + '/service/discovery/getPageView/0.htm',
                            params: {"articleId": data[i]['id']},
                            method: 'JSONP',
                            jsonp: 'jsonp'
                        })
                        
                        promise.then(function (response){
                            var d = JSON.parse(response.bodyText);
                            if (d.errorCode == 0) {
                                // 处理浏览量
                                data[i]['view'] = d.result;
                                num = num - 1;
                            }
                            if (num == 0) {
                                // 推荐列表
                                me.listMsg = data;
                            }
                        });
                        
                    })(i);
                }
            }
        },
        
        /**
         * 解析json
         * @param {Object} data
         * @return 
         */
        parseData: function(data) {
            var _data;
            if (!data) return data;
            try{
                _data = JSON.parse(data);
            }catch(e){
                _data = data;
            }
            return _data;
        },
        
        /**
         * 判断是否是对象
         * @param {Object} obj
         * @return 
         */
        isObject: function(obj) {
            return obj && (typeof(obj) != 'string') ? true : false;
        }
        
    }
}
    
</script>

<style lang="scss">
@function rem($px){
  @return $px / 10 * 1rem;
} 
    
.last-end {
    text-align: center;
    line-height: rem(50);
    font-size: rem(12);
}
</style>

<style>

@import '../../../assets/css/reset.scss';
body {
    font-family: "Microsoft YaHei";
    background: #f4f4f4;
}

</style>